import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:music_app/widget/my_cached_network_image.dart';

// 歌单信息详情
class PlayListInfoDetail extends StatelessWidget {
  final String name;
  final List tags;
  final String imageUrl;
  final String description;

  const PlayListInfoDetail({
    super.key,
    required this.name,
    required this.tags,
    required this.imageUrl,
    required this.description,
  });

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        child: Stack(
          children: [
            // 背景图
            MyCachedNetworkImage(
              imageUrl: imageUrl,
              width: 120,
              height: 120,
              x: 480,
              y: 480,
            ),
            // 高斯模糊效果
            BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
              child: Container(color: Colors.black.withOpacity(0.7)),
            ),
            Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                // mainAxisAlignment: MainAxisAlignment.center,
                // crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const SizedBox(
                    height: 56,
                  ),
                  ClipRRect(
                    borderRadius: BorderRadius.circular(8),
                    child: MyCachedNetworkImage(
                      imageUrl: imageUrl,
                      width: 160,
                      height: 160,
                      x: 640,
                      y: 640,
                    ),
                  ),
                  const SizedBox(
                    height: 12,
                  ),
                  Text(
                    name,
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  const SizedBox(
                    height: 12,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: List.generate(tags.length, (index) {
                      return Text(
                        '${tags[index]} ',
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                        ),
                      );
                    }),
                  ),
                  const SizedBox(
                    height: 12,
                  ),
                  Expanded(
                    child: SingleChildScrollView(
                      child: Text(
                        description,
                        style: const TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
